import React, { Component } from 'react';
import Info from './Info';
import { Link, Route } from 'react-router-dom';


export default class Message extends Component {
    //模拟加载message组件时请求的数据
    state = {
        message: [
            { id: '001', name: '小张', age: 18, say: '我是第一' },
            { id: '002', name: '小李', age: 28, say: '我是第二' },
            { id: '003', name: '小陈', age: 38, say: '我是第三' },
            { id: '004', name: '小王', age: 48, say: '我是第四' },
        ]
    }

    /* 
       params给路由组件传参的方式：
            在路由的地址后继续添加params参数
            在Route组件中接受params参数 /:xx/:xx
            在路由组件中，通过this.props.match.params即可拿到传递的信息
    */

    render() {
        const { message } = this.state;
        return (
            <div>
                <ul>
                    {
                        /* item: { id: '001', name: '小张', age: 18, say: '我是第一' }, */
                        message.map(item => {
                            return (
                                <li key={item.id}>
                                    {/*  <Link to={`/home/message/info/${item.name}/${item.age}/${item.say}`}>message{item.id}</Link> */}


                                    {/* Link组件to属性的新写法 */}
                                    <Link to={{
                                        pathname: '/home/message/info',
                                        state: item
                                    }}>message{item.id}</Link>
                                    <button onClick={this.showMsg(true , item)}>点击我也能查看内容（编程式路由导航）</button>
                                </li>
                            )
                        })
                    }
                </ul>
                <Route path='/home/message/info' component={Info} />
            </div>
        )
    }

    showMsg = (flag, state) => {
        return () => {
            console.log(this.props);
            //props中的history对象上push和replace方法可以进行编程式导航
            //参数1是路由地址，参数2是state值
            //push和replace的区别在是否存在历史记录,push存在历史记录，replace不存在历史记录
            flag ?
                this.props.history.push('/home/message/info', state) :
                this.props.history.replace('/home/message/info',state);
        }
    }


}


/*
                                       <li>
                                          <a href="/message1" message001>Message001</a>&nbsp;&nbsp;
                                        <Link to='/home/message/info'>Message001</Link>
                                    </li>
                                    <li>
                                       <a href="/message1" message001>Message002</a>&nbsp;&nbsp;
                                        <Link to='/home/message/info'>Message002</Link>
                                    </li>
                                    <li>
                                         <a href="/message1" message001>Message002</a>&nbsp;&nbsp;
                                        <Link to='/home/message/info'>Message003</Link>
                                     </li>

*/